<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('specialApplication.businessMeeting.queryCondition')}}</span></el-col> <!--查询条件-->
      </el-row>
      <popover-set-query @clickShow="clickShow">
        <el-form :inline="true" :model="listQuery" style="padding: 0 20px" :class="{'show':!showI}">
          <el-row style="padding-bottom: 10px">
            <!-- 標前會議日期 -->
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('specialApplication.businessMeeting.isValue')+
                '('+$t('specialApplication.businessMeeting.bidBeforeMeetingDate')+')'}}</div>
                <el-select v-model="listQuery.isBidBeforeValue" :clearable="true" :placeholder="$t('placeholder.choose')" @change="isBidBeforeMeetingDateValue" >
                  <el-option
                    v-for="item in isValues" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('specialApplication.businessMeeting.bidBeforeMeetingDate')}}</div>
                <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="listQuery.bidBeforeMeetingDate" :disabled="dateDisabled1"
                                type="daterange" range-separator="-" :start-placeholder="$t('placeholder.startDate')" :end-placeholder="$t('placeholder.endDate')"></el-date-picker> <!--开始日期--><!--结束日期-->
              </div>
            </el-col>
            <!-- 内部啓動會議日期 -->
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('specialApplication.businessMeeting.isValue')+
                '('+$t('specialApplication.businessMeeting.innerStartMeetingDate')+')'}}</div>
                <el-select v-model="listQuery.isInnerStartValue" :clearable="true" :placeholder="$t('placeholder.choose')" @change="isInnerStartMeetingDateValue" >
                  <el-option
                    v-for="item in isValues" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('specialApplication.businessMeeting.innerStartMeetingDate')}}</div>
                <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="listQuery.innerStartMeetingDate" :disabled="dateDisabled2"
                                type="daterange" range-separator="-" :start-placeholder="$t('placeholder.startDate')" :end-placeholder="$t('placeholder.endDate')"></el-date-picker> <!--开始日期--><!--结束日期-->
              </div>
            </el-col>
            <!-- 外部啓動會議日期 -->
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('specialApplication.businessMeeting.isValue')+
                '('+$t('specialApplication.businessMeeting.outerStartMeetingDate')+')'}}</div>
                <el-select v-model="listQuery.isOuterStartValue" :clearable="true" :placeholder="$t('placeholder.choose')" @change="isOuterStartMeetingDateValue" >
                  <el-option
                    v-for="item in isValues" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('specialApplication.businessMeeting.outerStartMeetingDate')}}</div>
                <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="listQuery.outerStartMeetingDate" :disabled="dateDisabled3"
                                type="daterange" range-separator="-" :start-placeholder="$t('placeholder.startDate')" :end-placeholder="$t('placeholder.endDate')"></el-date-picker> <!--开始日期--><!--结束日期-->
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('specialApplication.businessMeeting.country')}}</div>
                <dict-select v-model="listQuery.country" code="country" :clearable="true" @change="setBg"></dict-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Category</div>
                <el-select clearable v-model="listQuery.bg" @change="changeBg" :placeholder="$t('placeholder.choose')">
                  <el-option v-for="item in bgList" :key="item" :label="item" :value="item">
                  </el-option>
                </el-select>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Account</div>
                <el-select multiple collapse-tags filterable clearable v-model="bu"  :placeholder="$t('placeholder.choose')">
                  <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">BD Name</div><!--请输入名称-->
                <el-input v-model="listQuery.bdName" :placeholder="$t('placeholder.name')" clearable class="filter-item"></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Status</div>
                <el-select clearable multiple class="yt-multiple" v-model="listQuery.status" :placeholder="$t('placeholder.choose')">
                  <el-option v-for="item in demandStatusList" :key="item.label" :label="item.label" :value="item.label"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Sales/Presales/PM</div>
                <!-- <el-input v-model="listQuery.user" :placeholder="$t('placeholder.enterNoOrName')" clearable class="filter-item"></el-input> -->
                <popover-select selectType="user" :placeholder="$t('placeholder.enterNoOrName')" valueObjName="ename" v-model="listQuery.user"></popover-select>
                <!--請輸入員編/姓名-->
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Client</div>
                <!-- <el-autocomplete style="width: 100%" clearable v-model="listQuery.clientName" :fetch-suggestions="getCustomerList" :placeholder="$t('placeholder.enterShortOrAllName')" @select="selectCustomer"></el-autocomplete> -->
                <!--请输入简称或全称-->
                <popover-select @setValue="selectCustomer" selectType="customer" :placeholder="$t('placeholder.enterShortOrAllName')" valueObjName="customerShortName" v-model="listQuery.clientName"></popover-select>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">{{$t('specialApplication.businessMeeting.awardDate')}}</div>
                <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                v-model="listQuery.awardDate"
                                type="daterange" range-separator="-"
                                :start-placeholder="$t('placeholder.startDate')"
                                :end-placeholder="$t('placeholder.endDate')"></el-date-picker> <!--开始日期--><!--结束日期-->
              </div>
            </el-col>
            <el-col :span="4">
              <div class="w20">
                <div class="labelName">Target Quarter</div>
                <yt-time-quarter :targetQuarterDate.sync="listQuery.targetQuarterDate"
                                 :placeholder="$t('specialApplication.maintenance.targetQuarterDate')"
                                 v-model="listQuery.targetQuarter">
                </yt-time-quarter>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="w20">
                <div class="labelName">Target Month</div>
                <el-date-picker v-model="listQuery.targetMonthStart" style="width: 45%" type="month" value-format="yyyy-MM" format="yyyy-MM" :placeholder="$t('placeholder.choose')"/>
                <span>-</span>
                <el-date-picker v-model="listQuery.targetMonthEnd" style="width: 45%;display: inline-block" type="month" value-format="yyyy-MM" format="yyyy-MM" :placeholder="$t('placeholder.choose')"/>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="w20">
                <div class="labelName">Estmated budget</div>
                <el-input style="width: 45%" @blur="inputMoney($event,'estimatedBudgetMinString')" :clearable="true" v-model="listQuery.estimatedBudgetMinString" :placeholder="$t('placeholder.content')"></el-input>
                <span>-</span>
                <el-input style="width: 45%"  @blur="inputMoney($event,'estimatedBudgetMaxString')" :clearable="true" v-model="listQuery.estimatedBudgetMaxString" :placeholder="$t('placeholder.content')"></el-input>
              </div>
            </el-col>


            <el-col :span="4" style="margin-top: 32px">
              <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.search')}}</div>
              <div type="primary" class="yt-btn yt-ml8" @click="reset">{{$t('button.reset')}}</div>
            </el-col>
          </el-row>
        </el-form>
      </popover-set-query>
    </div>

    <div class="yt-data-list" style="padding-bottom: 20px;" v-loading="listLoading"
         :element-loading-text="$t('projectRevenue.dataReport.loading')"
         element-loading-spinner="el-icon-loading">
      <div class="yt-list-title">
        <span>{{$t('specialApplication.businessMeeting.demand')}}</span><!--商机维护-->
      </div>
      <div class="yt-list-content">
        <div class="list-operation">
          <!--新增-->
          <div class="yt-btn yt-btn-ys" type="primary" @click="newly">{{$t('button.save')}}</div>
          <!--删除-->
          <div class="yt-btn yt-ml8" type="danger" v-if="demandDeltePermision" @click="handleDelete('del')">{{$t('button.delete')}}</div>
          <!--汇出-->
          <div class="yt-btn yt-ml8" type="primary" @click="exportExcel">{{$t('button.export')}}</div><!--汇出-->
          <!--设置栏位-->
          <div class="yt-btn yt-ml8" type="primary" @click="setUp">{{$t('button.sets')}}</div>
        </div>
         <el-table :data="list" :empty-text="$t('placeholder.emptyText')"
                    v-if="displayBlockNameListFla === '1'"
                    border class="yt-table"
                    @selection-change="handleSelectionChange"
                    style="width: 100%" max-height="600" :cell-style="{padding:'5px 0px'}">
            <el-table-column align="center" label="Sum" width="60" fixed>
              <el-table-column align="center" type="selection" prop="id" width="60"/>
            </el-table-column>

          <el-table-column v-if="displayBlockNameStr['countryName']" align="center"
                           :label="$t('specialApplication.maintenance.country')"
                           prop="countryName" min-width="100" sortable fixed/><!--国别-->

          <el-table-column v-if="displayBlockNameStr['BG']" align="center"
                           label="Category" prop="bg" min-width="100" sortable fixed/>

          <el-table-column v-if="displayBlockNameStr['BU']" align="center"
                           label="Account" prop="bu" min-width="100" sortable fixed/>

          <el-table-column v-if="displayBlockNameStr['clientTypeName']" align="center"
                           label="Client Type" prop="clientTypeName" min-width="100" sortable fixed/>

          <el-table-column v-if="displayBlockNameStr['clientName']" align="center"
                           label="Client" prop="clientName" min-width="150"
                            :show-overflow-tooltip="true" sortable fixed/>

          <el-table-column v-if="displayBlockNameStr['bdValue']" align="center"
                           label="BD No." prop="bdValue" min-width="100" sortable fixed/>

          <el-table-column v-if="displayBlockNameStr['bdName']" align="center"
                           label="BD Name" prop="bdName" min-width="200"
                            :show-overflow-tooltip="true" sortable fixed/>

          <el-table-column v-if="displayBlockNameStr['sales']" align="center" label="">
            <el-table-column align="center" label="Sales" prop="sales" min-width="100" sortable/>
          </el-table-column>

          <el-table-column v-if="displayBlockNameStr['presales']" align="center" label="">
            <el-table-column align="center" label="Presales" prop="presales" min-width="100" sortable/>
          </el-table-column>

          <el-table-column v-if="displayBlockNameStr['pm']" align="center" label="">
            <el-table-column align="center" label="PM" prop="pm" min-width="100" sortable/>
          </el-table-column>

          <el-table-column align="center" v-if="displayBlockNameStr['startDate']" :label="subtotal.startDate + ''">
            <el-table-column align="center" label="Start Date" prop="startDate" min-width="100" sortable/>
          </el-table-column>

          <el-table-column align="center" v-if="displayBlockNameStr['endDate']" :label="subtotal.endDate + ''">
            <el-table-column align="center" label="End Date" prop="endDate" min-width="100" sortable/>
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['targetQuarter']" :label="subtotal.targetQuarter + ''">
            <el-table-column align="center" label="Target Quarter" prop="targetQuarter" min-width="100" />
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['targetMonth']" :label="subtotal.targetMonth + ''">
            <el-table-column align="center" label="Target Month" prop="targetMonth" min-width="100" sortable/>
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['estimatedBudget']" :label="subtotal.estimatedBudget + ''">
            <el-table-column align="center" label="Estimated Budget"  prop="estimatedBudget" min-width="100" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.estimatedBudget }}</div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['estimatedCost']" :label="subtotal.estimatedCost + ''">
            <el-table-column align="center" label="Estimated cost"  prop="estimatedCost" min-width="100" sortable>
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.estimatedCost }}</div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['status']" label="">
            <el-table-column align="center" label="Status" prop="status" min-width="150" sortable/>
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['winOddsName']" label="">
            <el-table-column align="center" label="Win Odds %" prop="winOddsName" min-width="100" sortable>
              <template slot-scope="scope">
                <div>{{ scope.row.winOddsName }}</div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['traceMonth']" label="">
            <el-table-column align="center" prop="traceMonth" label="Tracking Time" min-width="100" sortable/>
          </el-table-column>

          <el-table-column align="center" v-if="displayBlockNameStr['awardDate']" label="">
            <el-table-column align="center" prop="awardDate"
                             :label="$t('specialApplication.businessMeeting.awardDate')"
                             min-width="150" sortable>
              <template slot-scope="scope">
              <el-date-picker v-model="scope.row.awardDate" size="mini" style="width: 100%"
                              type="date" value-format="yyyy-MM-dd"
                              :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
              </template>
            </el-table-column>
          </el-table-column>
           <!-- 1、标案背景说明 -->
           <el-table-column align="center" label="標案背景說明">
             <el-table-column align="center" prop="agenda11" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda11')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda11" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
             <el-table-column align="center" prop="agenda12" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda12')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda12" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
             <el-table-column align="center" prop="agenda13" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda13')" min-width="160" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda13" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
             <el-table-column align="center" prop="agenda14" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda14')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda14" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
           </el-table-column>
           <!-- 2、组织图 -->
           <el-table-column align="center" label="組織圖">
             <el-table-column align="center" prop="agenda21" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda21')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda21" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
             <el-table-column align="center" prop="agenda22" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda22')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda22" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
             <el-table-column align="center" prop="agenda23" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda23')" min-width="160" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda23" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
           </el-table-column>
           <!-- 3、对手分析 -->
           <el-table-column align="center" label="對手分析">
             <el-table-column align="center" prop="agenda31" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda31')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda31" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
           </el-table-column>
           <!-- 4、赢的策略 -->
           <el-table-column align="center" label="贏的策略">
             <el-table-column align="center" prop="agenda41" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda41')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda41" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
             <el-table-column align="center" prop="agenda42" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda42')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda42" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
           </el-table-column>
           <!-- 5、标案管控 -->
           <el-table-column align="center" label="標案管控">
             <el-table-column align="center" prop="agenda51" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda51')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda51" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
             <el-table-column align="center" prop="agenda52" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda52')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda52" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
             <el-table-column align="center" prop="agenda53" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda53')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda53" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
             <el-table-column align="center" prop="agenda54" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda54')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda54" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
           </el-table-column>
           <!-- 6、资源分析 -->
           <el-table-column align="center" label="資源分析">
             <el-table-column align="center" prop="agenda61" :render-header="renderHeader1"
                              :label="$t('specialApplication.businessMeeting.agenda61')" min-width="150" sortable>
               <template slot-scope="scope">
                 <el-date-picker v-model="scope.row.agenda61" size="mini" style="width: 100%"
                                 type="date" value-format="yyyy-MM-dd"
                                 :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
               </template>
             </el-table-column>
           </el-table-column>

          <el-table-column align="center" v-if="displayBlockNameStr['bidBeforeMeetingRemark']" label="">
            <el-table-column align="center" prop="bidBeforeMeetingRemark" sortable
                             :label="$t('specialApplication.businessMeeting.bidBeforeMeetingRemark')"
                             min-width="200"  :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-input v-model="scope.row.bidBeforeMeetingRemark"
                          style="-ms-overflow-y: hidden; -ms-overflow-x: hidden" resize="none" :placeholder="$t('placeholder.content')"
                          type="textarea" :maxlength="50" autosize/>
              </template>
            </el-table-column>
          </el-table-column>

          <!--標前會議日期-->
          <el-table-column align="center" v-if="displayBlockNameStr['bidBeforeMeetingDate']" :label="subtotal.bidBeforeMeetingDate+''">
            <el-table-column align="center" prop="bidBeforeMeetingDate" sortable
                             :label="$t('specialApplication.businessMeeting.bidBeforeMeetingDate')" min-width="150">
              <template slot-scope="scope">
                <el-date-picker v-model="scope.row.bidBeforeMeetingDate" size="mini" style="width: 100%" align="center"
                                type="date" value-format="yyyy-MM-dd"
                                :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"></el-date-picker>
              </template>
            </el-table-column>
          </el-table-column>
          <!--內部啟動會議日期(Award70%)-->
          <el-table-column align="center" v-if="displayBlockNameStr['innerStartMeetingDate']" :label="subtotal.innerStartMeetingDate+''">
            <el-table-column align="center" prop="innerStartMeetingDate" :render-header="renderHeader1" sortable
                             :label="$t('specialApplication.businessMeeting.innerStartMeetingDate')+' (Award70%)'" min-width="150">
              <template slot-scope="scope">
                <el-date-picker v-model="scope.row.innerStartMeetingDate"
                                v-if="scope.row.innerStartMeetingDateIs !== '1'"
                                size="mini" style="width: 100%" align="center"
                                type="date" value-format="yyyy-MM-dd"
                                :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"></el-date-picker>
                <span v-else>N/A</span>
              </template>
            </el-table-column>
          </el-table-column>
          <!--外部啟動會議日期(Award70%)-->
          <el-table-column align="center" v-if="displayBlockNameStr['outerStartMeetingDate']" :label="subtotal.outerStartMeetingDate+''">
            <el-table-column align="center"  prop="outerStartMeetingDate" :render-header="renderHeader1" sortable
                             :label="$t('specialApplication.businessMeeting.outerStartMeetingDate')+' (Award70%)'" min-width="150">
              <template slot-scope="scope">
                <el-date-picker v-model="scope.row.outerStartMeetingDate"
                                v-if="scope.row.outerStartMeetingDateIs !== '1'"
                                size="mini" style="width: 100%" align="center"
                                type="date" value-format="yyyy-MM-dd"
                                :placeholder="$t('specialApplication.businessMeeting.placeholder.paeaseDate')"> </el-date-picker>
                <span v-else>N/A</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['actionsSales']" label="">
            <el-table-column align="center" label="Action-Sales" prop="actionsSales" min-width="100" :show-overflow-tooltip="true" sortable/>
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['actionsPresales']" label="">
            <el-table-column align="center" label="Action-Presales" prop="actionsPresales" min-width="120" :show-overflow-tooltip="true" sortable/>
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['isFinishValue']" label="">
            <el-table-column align="center" :label="$t('specialApplication.businessMeeting.isFinishValue')" prop="isFinishValue" min-width="100" sortable/><!--成案否-->
          </el-table-column>
          <el-table-column align="center" v-if="displayBlockNameStr['projectNo']" label="">
            <el-table-column align="center" :label="$t('specialApplication.businessMeeting.projectNo')" prop="projectNo" min-width="100" sortable/><!--对应专编-->
          </el-table-column>
        </el-table>

        <!--设置可见栏位-->
        <el-dialog :title="$t('projectRevenue.dataReport.setVisible')" :visible.sync="TableTitleVisible">
          <yt-table-title :blockNameCode="blockNameCode" :displayBlockNameList ="displayBlockNameList" @cancel="cancel"></yt-table-title>
        </el-dialog>
      </div>
      <div class="pagination-container" style="padding: 0 20px 10px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page.sync="listQuery.page" :page-sizes="[10, 20, 30, 50, 100, 200]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import {
  demandQuery,
  demandDelete,
  targetCheck,
  queryAllUser,
  queryAllCustomer,
  updateBusinessMeeting
} from '@/api/specialApplication/index';
import { selectBuData, listbgAndbu, getDeptByBuAndCountry } from '@/api/bu/index';
import formatter from '@/utils/formatter';
import mixins from '@/mixins/yt-table-title';
import YtTableTitle from '@/components/yt-table-title/index';
import { queryDisplayBlock } from '@/api/pmoReport/projectRevenue';
import { mapGetters } from 'vuex';
import YtTimeQuarter from '@/components/yt-time-quarter/main.vue';
import popoverSetQuery from '@/components/popover-setQuery/index.vue';
import popoverSelect from '@/components/popover-select/index.vue';
import { getInputValue, delcommafy } from '@/utils/thousandSemicolonUtils.js'

export default {
  name: 'businessMeeting',
  mixins: [mixins],
  components: {
    YtTableTitle,
    popoverSelect,
    YtTimeQuarter,
    popoverSetQuery,
    'dict-select': () => import('@/components/Dict/dictValueSelect')
  },
  data() {
    return {
      dateDisabled1: true,
      dateDisabled2: true,
      dateDisabled3: true,
      isValues: [
        { value: '1', label: '有值' },
        { value: '0', label: '無值' }],
      demandDeltePermision: false, // 是否有删除权限
      bu: [],
      disableFlag: false, // 是否可以选择end Date
      blockNameCode: 'businessMeeting',
      displayBlockNameStr: {},
      displayBlockNameListFla: {},
      TableTitleVisible: false,
      showI: true,
      timeQuarter: '',
      demandStatusList: this.$store.getters.allDic.demandStatus,
      listAll: this.$store.getters.allDic,
      listMapAll: this.$store.getters.allMapDic,
      buListAll: {},
      statusAll: {},
      config: Config.I18n,
      formatter,
      form: {
        username: undefined,
        name: undefined,
        sex: 'comm_sex_man',
        password: undefined,
        description: undefined,
        departName: undefined,
        departId: undefined,
        groupType: undefined,
        email: undefined
      },
      customerList: [],
      userList: [],
      buList: [],
      buData: [],
      bgList: [],
      setBgList: [],
      setBuList: [],
      options: [
        { label: '1', value: '1' },
        { label: '2', value: '2' },
        { label: '3', value: '3' }
      ],
      isCaseOptions: [{ label: '1', value: '1' }, { label: '2', value: '2' }],
      subtotal: {},
      list: null, // 用于表格渲染数据
      total: null,
      tableListist: null, // 缓存原始数据
      listLoading: true,
      listQuery: {
        order: '', // 降序（desc）/升序（asc）
        orderBy: '', // 排序字段
        page: 1,
        limit: 10,
        bdName: '',
        country: '',
        bu: [],
        name: '',
        client: '',
        bg: '',
        status: [],
        estimatedBudgetMaxString: '',
        estimatedBudgetMinString: '',
        estimatedBudgetMax: '',
        estimatedBudgetMin: '',
        isOuterStartValue: '',
        isInnerStartValue: '',
        isBidBeforeValue: ''
      },
      selectionList: [],
      startDate: '',
      sales: '',
      presales: '',
      client: '',
      dialogForm: {
        id: '',
        buId: '',
        country: '',
        bg: '',
        bu: '',
        clientType: '',
        territory: '',
        client: '',
        bdNo: '',
        bdOrder: '',
        bdName: '',
        contactWindow: '',
        decisionMaker: '',
        sales: '',
        salesId: '',
        presales: '',
        presalesId: '',
        pm: '',
        pmId: '',
        startDate: '',
        endDate: '',
        targetQuarter: '',
        targetMonth: '',
        estimatedBudget: '',
        estimatedCost: '',
        status: '',
        actionsSales: '',
        actionsPresales: '',
        isFinish: 'N',
        projectNo: '',
        latelyDailySales: '',
        latelyDailyPresales: '',
        outerStartMeetingDateIs: '',
        bidBeforeMeetingDate: '',
        innerStartMeetingDate: '',
        outerStartMeetingDate: '',
        estimatedCostThis: '',
        estimatedRevenueThis: ''
      },
      newlyParam: null,
      salesStatus: false
    };
  },
  mounted() {
    this.demandDeltePermision = this.elements['demandPermissionMaintain.delete']
    this.getColumn();
    this.getList();
    this.getAll();
    this.querySetBg(this.listQuery.country)
    this.queryChangeBg(this.listQuery.bg)
    this.loadBg()
  },
  computed: {
    ...mapGetters(['elements'])
  },
  methods: {
    check(el, name) {
      if (this.listQuery[name]) {
        const rule = /^[-]?\d*$/
        const inputVal = delcommafy(this.listQuery[name]);
        if (rule.test(inputVal)) {
          this.listQuery[name] = getInputValue(el);
        } else {
          this.$notify({
            title: this.$t('tips.fail'), // 失败
            message: 'Estmated budget區間只能輸入數字',
            type: 'warning'
          });
        }
      }
    },
    inputMoney(el, name) {
      console.log(this.listQuery[name], 'this.listQuery[name]')
      // 验证一下是否为数字
      this.check(el, name)
    },
    cancel(val) {
      if (val) {
        this.getColumn();
      }
      this.TableTitleVisible = false
    },
    // 获取初始的栏位
    getColumn() {
      const data = {
        tableName: this.blockNameCode,
        userId: this.$store.getters.info.id
      }
      this.getMixinColumn(data)
    },
    getMixinColumn(data) {
      this.displayBlockNameStr = {}
      queryDisplayBlock(data).then(res => {
        if (res.status === 200) {
          if (res.data.length > 0) {
            this.displayBlockNameListFla = '1'
          } else {
            this.displayBlockNameListFla = '0'
          }
          this.displayBlockNameList = res.data
          for (const i in this.displayBlockNameList) {
            this.displayBlockNameStr[this.displayBlockNameList[i]] = true
          }
        }
      })
    },
    // 获取弹框的栏位
    setUp() {
      // 设置
      console.log(this.displayBlockNameList)
      this.TableTitleVisible = true
    },
    clickShow(val) {
      this.showI = val
    },
    renderHeader1(h, { column }) {
      const header = column.label.split(' ');
      return [h('p', [
        h('p', {}, header[0]),
        h('p', {}, header[1]),
        h('span', {}, header[2])
      ])];
    }, // 文本分别添加到p,span标签中
    getAll() {
      // 用来做验证
      queryAllUser({}).then(res => {
        this.userList = res.data.rows
      })

      queryAllCustomer({}).then(res => {
        this.customerList = res.data.rows
      })
    },
    selectCustomer(item) {
      this.listQuery.client = item.id;
    },
    querySetBg(country) {
      const param = {}
      if (country) {
        param.country = country
        param.bu = []
        param.bg = []
        getDeptByBuAndCountry(param).then(res => {
          this.buList = res.data.buList;
          this.bgList = res.data.bgList;
          this.setBgList = res.data.bgList;
          this.setBuList = res.data.buList;
        })
      } else {
        this.loadBg()
      }
    },
    queryChangeBu(val) {
      // 联动bg
      if (val === '') {
        this.getBg()
      } else {
        listbgAndbu({ bu: val, bg: '' }).then(res => {
          this.bgList = res.data
        });
      }
    },
    queryChangeBg(val) {
      this.changeBg(val)
      // 联动bu
    },
    setBg(country) {
      const param = {}
      if (country) {
        param.country = country
        param.bu = []
        param.bg = []
        getDeptByBuAndCountry(param).then(res => {
          this.buList = res.data.buList;
          this.bgList = res.data.bgList;
          this.setBgList = res.data.bgList;
          this.setBuList = res.data.buList;
        })
      } else {
        this.loadBg();
      }
      selectBuData().then(res => {
        this.buData = res.data;
      });
    },
    loadBg() {
      const param = {}
      getDeptByBuAndCountry(param).then(res => {
        this.buList = res.data.buList;
        this.bgList = res.data.bgList;
        this.setBgList = res.data.bgList;
        this.setBuList = res.data.buList;
      })
    },
    setBu() {
      this.buData.forEach(res => {
        if (res.bu === this.dialogForm.bu) {
          this.dialogForm.buId = res.id
          this.dialogForm.bg = res.bg
          this.dialogForm.country = res.country
        }
      })
    },
    changeBg(row) {
      this.bu = []
      const bgSet = []
      if (row.length !== 0) {
        bgSet.push(row)
      }
      const param = {}
      param.country = this.listQuery.country
      param.bg = bgSet
      param.bu = []
      getDeptByBuAndCountry(param).then(res => {
        this.buList = res.data.buList
      })
    },
    changeBu(row) {
      if (row.length === 0) {
        this.bu = []
      }
    },
    isBidBeforeMeetingDateValue(row) {
      if (row === '1') {
        this.dateDisabled1 = false;
      } else {
        this.dateDisabled1 = true;
        this.isBidBeforeValue = ''
      }
    },
    isInnerStartMeetingDateValue(row) {
      if (row === '1') {
        this.dateDisabled2 = false;
      } else {
        this.dateDisabled2 = true;
        this.isInnerStartValue = ''
      }
    },
    isOuterStartMeetingDateValue(row) {
      if (row === '1') {
        this.dateDisabled3 = false;
      } else {
        this.dateDisabled3 = true;
        this.isOuterStartValue = '';
      }
    },
    exportExcel() {
      let str = ''; // 传参数
      for (const i in this.listQuery) {
        if (this.listQuery[i]) {
          str += i + '=' + this.listQuery[i] + '&';
        }
      }

      if (this.$store.getters.info && this.$store.getters.info.id) {
        str = str + 'createBy=' + this.$store.getters.info.id;
      }
      
      const a = document.createElement('a');
      const href = '/api/admin/excel/excelFireTenementMeeting?' + str;
      console.info(href)
      a.download = Date.now();
      a.href = href;
      a.click();
    },
    getQuery() {
      const businessMeeting = window.sessionStorage.getItem('businessMeeting');
      if (businessMeeting) {
        this.listQuery = JSON.parse(businessMeeting);
      }
    },
    targetCheck() {
      this.listLoading = true;
      targetCheck()
        .then(response => {
          this.list = response.data.rows;

          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].winOdds) {
              this.list[i].winOddsName = this.list[i].winOdds + '%';
            }
            this.list[i].countryName = this.listMapAll.country[this.list[i].country];
            this.list[i].isFinishValue = this.listMapAll.NorY[this.list[i].isFinish];
            this.list[i].clientTypeName = this.listMapAll.clientType[this.list[i].clientType];
          }
          this.total = response.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
          this.getList();
        });
    },
    demandQuery() {
      const bgSet = []
        const bg = []
        if (this.listQuery.bg.length !== 0) {
          bgSet.push(this.listQuery.bg)
          this.listQuery.bg = bgSet
        }else{
            this.listQuery.bg = bg
        }

      return new Promise(resolve => {
        this.listLoading = true;
        if (this.listQuery.startDate && this.listQuery.startDate.length > 0) {
          this.listQuery.startTime = this.listQuery.startDate[0];
          this.listQuery.endTime = this.listQuery.startDate[1];
        }
        if (this.listQuery.bidBeforeMeetingDate && this.listQuery.bidBeforeMeetingDate.length > 0) {
          this.listQuery.bidBeforeMeetingDateStart = this.listQuery.bidBeforeMeetingDate[0];
          this.listQuery.bidBeforeMeetingDateEnd = this.listQuery.bidBeforeMeetingDate[1];
        }
        if (this.listQuery.innerStartMeetingDate && this.listQuery.innerStartMeetingDate.length > 0) {
          this.listQuery.innerStartMeetingDateStart = this.listQuery.innerStartMeetingDate[0];
          this.listQuery.innerStartMeetingDateEnd = this.listQuery.innerStartMeetingDate[1];
        }
        if (this.listQuery.outerStartMeetingDate && this.listQuery.outerStartMeetingDate.length > 0) {
          this.listQuery.outerStartMeetingDateStart = this.listQuery.outerStartMeetingDate[0];
          this.listQuery.outerStartMeetingDateEnd = this.listQuery.outerStartMeetingDate[1];
        }
        if (this.listQuery.awardDate && this.listQuery.awardDate.length > 0) {
          this.listQuery.awardDateStart = this.listQuery.awardDate[0];
          this.listQuery.awardDateEnd = this.listQuery.awardDate[1];
        }
        if (this.listQuery.estimatedBudgetMaxString) {
          const rule = /^[-]?\d*$/
          const inputVal = delcommafy(this.listQuery.estimatedBudgetMaxString);
          if (rule.test(inputVal)) {
            this.listQuery.estimatedBudgetMax = inputVal
          } else {
            this.$notify({
              title: this.$t('tips.fail'), // 失败
              message: 'Estmated budget區間只能輸入數字',
              type: 'warning'
            });
            return
          }
        } else {
          this.listQuery.estimatedBudgetMax = ''
        }
        if (this.listQuery.estimatedBudgetMinString) {
          const rule = /^[-]?\d*$/
          const inputVal = delcommafy(this.listQuery.estimatedBudgetMinString);
          if (rule.test(inputVal)) {
            this.listQuery.estimatedBudgetMin = inputVal
          } else {
            this.$notify({
              title: this.$t('tips.fail'), // 失败
              message: 'Estmated budget區間只能輸入數字',
              type: 'warning'
            });
            return
          }
        } else {
          this.listQuery.estimatedBudgetMin = ''
        }
        demandQuery(this.listQuery).then(response => {
          if (response.data.rows && response.data.rows.length > 0) {
            this.list = response.data.rows;
            this.subtotal = response.data.subtotal;
            Object.keys(this.subtotal).forEach(key => {
              this.subtotal[key] = String(this.subtotal[key]).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
            })
            for (let i = 0; i < this.list.length; i++) {
              if (this.list[i].winOdds) {
                this.list[i].winOddsName = this.list[i].winOdds + '%';
              }
              this.list[i].countryName = this.listMapAll.country[this.list[i].country];
              this.list[i].isFinishValue = this.listMapAll.NorY[this.list[i].isFinish];
              this.list[i].clientTypeName = this.listMapAll.clientType[this.list[i].clientType];
            }
          } else {
            this.list = [];
            this.subtotal = {};
          }
          this.total = response.data.total;
          this.listLoading = false;
          resolve()
        });
      })
    },
    getList() {
      this.demandQuery()
    },
    handleFilter() {
      this.listQuery.bu = this.bu
      this.getList();
    },
    reset() {
      this.bu = []
      this.listQuery.bu = ''
      this.listQuery = {
        order: '', // 降序（desc）/升序（asc）
        orderBy: '', // 排序字段
        page: 1,
        limit: 10,
        bdName: '',
        country: '',
        bu: [],
        name: '',
        client: '',
        bg: '',
        status: [],
        estimatedBudgetMaxString: '',
        estimatedBudgetMinString: '',
        estimatedBudgetMax: '',
        estimatedBudgetMin: '',
        isOuterStartValue: '',
        isInnerStartValue: '',
        isBidBeforeValue: ''
      };
      this.getList();
      this.loadBg();
      this.isBidBeforeMeetingDateValue();
      this.isInnerStartMeetingDateValue();
      this.isOuterStartMeetingDateValue();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      window.sessionStorage.setItem(
        'businessMeeting',
        JSON.stringify(this.listQuery)
      );
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleSelectionChange(val) {
      //  表格序号选中函数
      this.selectionList = val;
    },
    // 删除
    handleDelete() {
      let clientName = ''
      if (this.selectionList.length <= 0) {
        this.$notify({
          title: this.$t('tips.fail'), // '失败',
          message: this.$t('specialApplication.maintenance.pleaseSelectOne'), // 请选择一条记录
          type: 'warning'
        });
        return false
      }
      this.selectionList.forEach((row, i) => {
        clientName += clientName !== '' ? '、' + this.selectionList[i].bdName : this.selectionList[i].bdName
      })

      this.$confirm(this.$t('worksTargetEdit.notify.message4') + clientName + this.$t('worksTargetEdit.notify.message8') + this.selectionList.length + this.$t('worksTargetEdit.notify.message6') + this.$t('worksTargetEdit.notify.message7'), this.$t('worksTargetEdit.notify.message5'), {
        confirmButtonText: this.$t('worksTargetEdit.notify.confirmButtonText'),
        cancelButtonText: this.$t('worksTargetEdit.notify.cancelButtonText'),
        type: 'warning'
      }).then(() => {
        const arr = []; // 存放已修改的
        this.selectionList.forEach(item => {
          if (
            JSON.stringify(this.tableListist).indexOf(JSON.stringify(item)) < 0
          ) {
            arr.push(item);
          }
        })
        demandDelete(arr).then(res => {
          this.$notify({
            title: res.status === 200 ? this.$t('tips.success') : this.$t('tips.fail'), // '成功' : '失败',
            message: res.data,
            type: res.status === 200 ? 'success' : 'warning'
          });
          this.getList();
        });
      }).catch(() => {
        this.$message({ type: 'info', message: this.$t('worksTargetEdit.message.message2') });
      });
    },
    // 保存
    newly() {
      // const params = []
      // if (this.selectionList.length > 0) {
      //   for (const ii in this.selectionList) {
      //     params.push(this.list[ii])
      //   }
      // } else {
      //   for (const ii in this.list) {
      //     params.push(this.list[ii])
      //   }
      // }
      console.log(this.selectionList)
      // console.log(params)
      this.$confirm('是否保存列表修改数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateBusinessMeeting(this.selectionList).then(res => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
          } else {
            this.$message({
              type: 'warning',
              message: '保存失败!'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
  verify() {
    if (this.dialogForm.startDate && this.dialogForm.endDate) {
      const startTime = this.dialogForm.startDate.split('T')[0];
      const endTime = this.dialogForm.endDate.split('T')[0];
      const formatStartTime = new Date(startTime);
      const formatEndTime = new Date(endTime);
      if (formatStartTime > formatEndTime) {
        return 'startDate必须小于endDate'
      }
    }
  },
  beforeDestroy() {
    window.sessionStorage.setItem('businessMeeting', JSON.stringify(this.listQuery))
  }
};
</script>

<style scoped>
.box{
  /* border: 1px solid #d9d9d9; */
  padding: 0 15px !important;
  height: 15px;
  line-height: 15px;
  text-align: left;
  border-radius: 4px;
  color: #333;
  cursor:text;
  font-size: 12px;
}
.box:empty:before{
  content: attr(placeholder);
  color: #c0c4cc;
  font-size: 14px;
}
</style>
